<template>
  <view
    class="flex"
    :class="[
      props.direction == 'row' ? 'flex-row' : 'flex-col',
      props.direction == 'customCol' ? '' : _align,
    ]"
    :style="{ flexWrap: props.direction == 'customCol' ? 'nowrap' : 'wrap' }"
  >
    <slot></slot>
  </view>
</template>
<script lang="ts" setup>
  import {
    computed,
    nextTick,
    provide,
    ref,
    watch,
    getCurrentInstance,
    inject,
    toRaw,
    PropType,
    reactive,
    Ref,
  } from 'vue';
  import { inputPushItem, rulesItem } from './../tm-form-item/interface';
  const emits = defineEmits(['update:modelValue', 'change']);
  const proxy = getCurrentInstance()?.proxy ?? null;
  const props = defineProps({
    disabled: {
      type: Boolean,
      default: false,
    },
    //最大选中数量。
    max: {
      type: Number,
      default: 999,
    },
    defaultValue: {
      type: Array,
      default: () => [],
    },
    align: {
      type: String as PropType<'left' | 'center' | 'right'>,
      default: 'left',
    },
    modelValue: {
      type: Array,
      default: () => [],
    },
    direction: {
      type: String as PropType<'row' | 'col' | 'customCol'>,
      default: 'row', //row横排，col为竖排。customCol
    },
  });
  let _cacheBoxList: Ref<Array<string | number | boolean>> = ref([]);
  //去重
  const _mValue = ref([...new Set([...props.defaultValue, ...props.modelValue])]);
  const _align = computed(() => {
    let list = {
      left: 'flex-row-center-start',
      center: 'flex-row-center-center',
      right: 'flex-row-center-end',
    };
    let listCol = {
      left: 'flex-col-center-start',
      center: 'flex-col-center-center',
      right: 'flex-col-center-end',
    };
    return props.direction == 'row' ? list[props.align] : listCol[props.align];
  });
  //组件唯一标识。
  const checkBoxkeyId = 'tmCheckBoxGroup';
  watch(
    () => props.modelValue,
    () => {
      _mValue.value = props.modelValue;
    },
    { deep: true },
  );
  const _maxChecked = computed(() => _mValue.value.length >= props.max);
  function pushKey(key: string | number | boolean) {
    _cacheBoxList.value.push(key);
  }
  function addKey(key: string | number | boolean) {
    if (_mValue.value.includes(key)) return;
    _mValue.value.push(key);
    emits('update:modelValue', _mValue.value);
    nextTick(() => {
      emits('change', _mValue.value);
    });
  }
  function delKey(key: string | number | boolean) {
    _cacheBoxList.value = _cacheBoxList.value.filter((el) => el !== key);
    _mValue.value = _mValue.value.filter((el) => el !== key);
    emits('update:modelValue', _mValue.value);
    nextTick(() => {
      emits('change', _mValue.value);
    });
  }

  provide(
    'tmCheckedBoxDisabled',
    computed(() => props.disabled),
  );
  provide('tmCheckedBoxVal', _mValue);
  provide('tmCheckedBoxMax', _maxChecked);
  provide('tmCheckedBoxListChildren', _cacheBoxList);
  provide('tmCheckedBoxDir', props.direction);
  defineExpose({
    pushKey: pushKey,
    addKey: addKey,
    delKey: delKey,
    checkBoxkeyId: checkBoxkeyId,
  });
</script>
